﻿<h2 class="contentTitle">
    表单验证</h2>
<div class="pageContent">
    <form id="validForm" method="post" action="" class="pageForm required-validate" onsubmit="">
    <select id="single">
        <option>Single</option>
        <option>Single2</option>
    </select>
    <select id="multiple" multiple="multiple">
        <option selected="selected">Multiple</option>
        <option>Multiple2</option>
        <option selected="selected">Multiple3</option>
    </select><br />
    <input type="checkbox" value="check1" />
    check1
    <input type="checkbox" value="check2" />
    check2
    <input type="radio" value="radio1" />
    radio1
    <input type="radio" value="radio2" />
    radio2
    <div class="formBar">
        <ul>
            <li>
                <div class="buttonActive">
                    <div class="buttonContent">
                        <a type="submit" onclick='javascript:Check();'>测试</a></div>
                </div>
            </li>
        </ul>
    </div>
    <div class="pageFormContent nowrap" layouth="97">
        <dl>
            <dt>必填：</dt>
            <dd>
                <input type="text" name="name" size="30" maxlength="20" class="required" />
                <span class="info">class="required"</span>
            </dd>
        </dl>
        <dl>
            <dt>必填+邮箱：</dt>
            <dd>
                <input type="text" name="email" size="30" class="required email" alt="请输入您的电子邮件" />
                <span class="info">class="required email"</span>
            </dd>
        </dl>
        <dl>
            <dt>电话：</dt>
            <dd>
                <input type="text" name="phone" size="30" class="phone" alt="请输入您的电话" />
                <span class="info">class="phone"</span>
            </dd>
        </dl>
        <dl>
            <dt>密码：</dt>
            <dd>
                <input id="w_validation_pwd" type="password" name="password" size="30" class="required alphanumeric"
                    minlength="6" maxlength="20" alt="字母、数字、下划线 6-20位" />
                <span class="info">class="required alphanumeric" minlength="6" maxlength="20"</span>
            </dd>
        </dl>
        <dl>
            <dt>确认密码：</dt>
            <dd>
                <input type="password" name="password" size="30" class="required" equalto="#w_validation_pwd" />
                <span class="info">class="required" equalto="#xxxId"</span>
            </dd>
        </dl>
        <dl>
            <dt>整数：</dt>
            <dd>
                <input type="text" name="digits" size="30" class="digits" />
                <span class="info">class="digits"</span>
            </dd>
        </dl>
        <dl>
            <dt>浮点数：</dt>
            <dd>
                <input type="text" name="number" size="30" class="number" />
                <span class="info">class="number"</span>
            </dd>
        </dl>
        <dl>
            <dt>最小值：</dt>
            <dd>
                <input type="text" name="min" size="30" min="1" />
                <span class="info">min="1"</span>
            </dd>
        </dl>
        <dl>
            <dt>最大值：</dt>
            <dd>
                <input type="text" name="max" size="30" max="10" />
                <span class="info">max="10"</span>
            </dd>
        </dl>
        <dl>
            <dt>最小值-最大值：</dt>
            <dd>
                <input type="text" name="min_max" size="30" min="1" max="10" />
                <span class="info">min="1" max="10"</span>
            </dd>
        </dl>
        <dl>
            <dt>最小长度：</dt>
            <dd>
                <input type="text" name="minlength_maxlength" size="30" minlength="6" />
                <span class="info">min="6"</span>
            </dd>
        </dl>
        <dl>
            <dt>最大长度：</dt>
            <dd>
                <input type="text" name="minlength_maxlength" size="30" maxlength="10" />
                <span class="info">max="10"</span>
            </dd>
        </dl>
        <dl>
            <dt>最小长度-最大长度：</dt>
            <dd>
                <input type="text" name="minlength_maxlength" size="30" minlength="6" maxlength="20" />
                <span class="info">minlength="6" maxlength="20"</span>
            </dd>
        </dl>
        <dl>
            <dt>信用卡：</dt>
            <dd>
                <input type="text" name="creditcard" size="30" class="creditcard" />
                <span class="info">class="creditcard"</span>
            </dd>
        </dl>
        <dl>
            <dt>字母、数字、下划线：</dt>
            <dd>
                <input type="text" name="alphanumeric" size="30" class="alphanumeric" />
                <span class="info">class="alphanumeric"</span>
            </dd>
        </dl>
        <dl>
            <dt>字母：</dt>
            <dd>
                <input type="text" name="lettersonly" size="30" class="lettersonly" />
                <span class="info">class="lettersonly"</span>
            </dd>
        </dl>
        <dl>
            <dt>网址：</dt>
            <dd>
                <input type="text" name="url" size="30" class="url" />
                <span class="info">class="url"</span>
            </dd>
        </dl>
        <dl>
            <dt>remote：</dt>
            <dd>
                <input type="text" name="remote" size="30" remote="validate_remote.html" />
                <span class="info">唯一性验证input添加属性：remote="xxxUrl"</span>
            </dd>
        </dl>
        <div class="divider">
        </div>
        <p>
            自定义扩展请参照：dwz.validate.method.js</p>
        <p>
            错误提示信息国际化请参照：dwz.regional.zh.js</p>
    </div>
    <div class="formBar">
        <ul>
            <li>
                <div class="buttonActive">
                    <div class="buttonContent">
                        <a type="submit" onclick='javascript:$("#validForm").valid(); return false;'>提交</a></div>
                </div>
            </li>
            <li>
                <div class="button">
                    <div class="buttonContent">
                        <button type="button" class="close">
                            取消</button></div>
                </div>
            </li>
        </ul>
    </div>
    </form>
</div>

<script>

    function Check() {
        $("#single").val("Single2");
        $("#multiple").val(["Multiple2", "Multiple3"]);
        $("input").val(["check2", "radio1"]);
    }
</script>

